import react from 'react'
import './index.css'; // 导入样式
import avatar from './images/avatar.png'; // 导入图片
import Comment from './components/comment'
import Tab from './components/tab'
import List from './components/list'
import Form from './components/Form'
class App extends react.Component{
  state = {
  // hot: 热度排序  time: 时间排序
  tabs: [
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ],
  active: 'hot',
  list: [
    {
      id: 1,
      author: '刘德华',
      comment: '给我一杯忘情水',
      time: new Date('2021-10-10 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
    },
    {
      id: 2,
      author: '周杰伦',
      comment: '哎哟，不错哦',
      time: new Date('2021-10-11 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    },
    {
      id: 3,
      author: '五月天',
      comment: '不打扰，是我的温柔',
      time: new Date('2021-10-11 10:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
    ],
  }
  Submit = (txt) => {
    const commont = {
      id: Math.random(),
      author: '牛京松',
      comment: txt,
      time: new Date(),
      attitude: 0
    }
    this.setState({
      list: [commont, ...this.state.list],
      txt:''
    })
  }
  delComont = (id) => {
    this.setState({
      list: this.state.list.filter(item=>{return item.id!==id})
    })
  }
  //点赞
  like = (id,attitude) => {
    console.log(id, attitude);
    const newlist = this.state.list.map(item => {
      if (item.id === id) {
        return {...item,attitude:attitude}
      } else {
        return item
      }
    }
    )
    this.setState({
      list: newlist
    })
  }
  //排序
  sort = (type) => {
    if (type === 'time') {
      const newlists = this.state.list.sort((a, b) => {
        return b.time-a.time
      })
      this.setState({
        list:newlists,
        active: type,
      })  
    } else if (type === 'hot') {
      const newlists = this.state.list.sort((a, b) => {
        return a.time-b.time
      })
      this.setState({
        list:newlists,
        active: type,
      })  
    }
    console.log(type)
  }
  render() {
    return (<div className="comment-root">
    <div className="comment-container">
      {/* 评论数 */}
      <Comment count={this.state.list.length}></Comment>
      {/* 排序tab */}
      <Tab tabs={this.state.tabs} active={this.state.active} sort={this.sort}></Tab>

      {/* 发表评论区 */}
      <Form Submit={ this.Submit}></Form>
      {/* 评论列表区 */}
      <List list={this.state.list} delComont={this.delComont} like={this.like}></List> 
    </div>
  </div>)
    
    
}
}
export default App